<div class="container" [ngClass]="{'fixed-anchor': anchorShow}">
    <!-- WRAPPER -->
    <div class="container-wrapper wrapper-bg">
        <!-- HEADER -->
        <div class="container-header"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-header.png)'">
            <img src="{{deployUrl}}assets/img/end-year/renqi/renqi-title-1.png" alt="人气总榜">
        </div>
        <!-- MAIN -->
        <div class="container-main"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-center.png)'">
            <!-- 规则 -->
            <div class="container-main__rule">
                <p>
                    1、全平台主播均可参与；
                </p>
                <p>
                    2、活动时间：12月8日 00:00:00~19日 23:59:59；
                </p>
                <p>
                    3、总榜统计活动期间内主播累计获得的总人气值，最终活动结束后前3名获得奖励；
                </p>
                <p>
                    4、主播开播状态下在本直播间收到「人气票」礼物可获得人气值，1人气票=1人气值，为主播贡献人气值最高的用户将于主播一同登上榜单；
                </p>
                <p>
                    5、人气票礼物可通过参与「每日任务、盛典福利、每日充值、签到福利」获得，其中每日充值<span
                        class="emphasize">1314/520/100/50/2元</span>可分别获得<span class="emphasize">
                        100/50/20/10/5个
                    </span>人气票，获得后直接下发至背包有效期为24小时，1人气票=20火力值。
                </p>
            </div>
            <!-- 分割线 -->
            <!-- <div class="container-main__divider"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/rule-divider.png)'">
            </div> -->
            <!-- 活动已结束 -->
            <div *ngIf="status === 3" class="container-main__end"
                [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/activity-end-bg.png)'">
                活动已结束
            </div>
            <!-- OTHERS -->
            <div class="container-main__others">
                <div class="others-header"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-header-bg.png)'">
                    <div class="index">排名</div>
                    <div class="detail">主播信息</div>
                    <div class="value">人气值</div>
                    <div class="help">最佳助力</div>
                </div>
                <div class="others-main"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-bg.png)'" #main>
                    <!-- placeholder -->
                    <div *ngIf="top3List.length === 0" class="other-main__holder">
                        暂无数据
                    </div>
                    <!-- TOP3 -->
                    <div *ngFor="let anchor of top3List;let i = index" class="others-main__item"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/renqi/others-main-item-bg-'+(i+1)+'.png)'">
                        <div class="index">
                            <img [src]="deployUrl+'assets/img/end-year/renqi/others-main-item-rank-'+(i+1)+'.png'"
                                [alt]="i">
                        </div>
                        <div class="detail">
                            <div class="detail-avatar" (click)="goToRoom(anchor)">
                                <img class="detail-avatar__main" [src]="anchor.anchorHeadImage" alt="">
                                <ng-container *ngIf="anchor.liveStatus">
                                    <img *ngIf="isAndroid" class="detail-avatar__live"
                                        [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                    <img *ngIf="!isAndroid" class="detail-avatar__live"
                                        [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                </ng-container>
                            </div>
                            <div class="detail-info">
                                <div class="detail-info--name">{{anchor.anchorNickname}}</div>
                                <!-- 已结束后,第一名展示mvp标签 -->
                                <div class="detail-info--tag" *ngIf="anchor.rank === 1">
                                    <img src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
                                </div>
                                <div class="detail-info--gap" *ngIf="anchor.rank !== 1">
                                    {{anchor.rankDesc}}
                                </div>
                            </div>
                        </div>
                        <div class="value">{{anchor.score | withHundredMillion}}</div>
                        <div class="help">
                            <img class="help-case"
                                [src]="deployUrl+'assets/img/end-year/renqi/others-main-item-help-bg.png'">
                            <img class="help-avatar" [src]="anchor.userHeadImage | headImg" alt="">
                        </div>
                    </div>
                    <!-- item -->
                    <div *ngFor="let anchor of othersList" class="others-main__item"
                        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg.png)'">
                        <div class="index">{{anchor.rank}}</div>
                        <div class="detail">
                            <div class="detail-avatar" (click)="goToRoom(anchor)">
                                <img class="detail-avatar__main" [src]="anchor.anchorHeadImage | headImg" alt="">
                                <ng-container *ngIf="anchor.liveStatus">
                                    <img *ngIf="isAndroid" class="detail-avatar__live"
                                        [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                    <img *ngIf="!isAndroid" class="detail-avatar__live"
                                        [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                                </ng-container>
                            </div>
                            <div class="detail-info">
                                <div class="detail-info--name">{{anchor.anchorNickname}}</div>
                                <div class="detail-info--gap">
                                    {{anchor.rankDesc}}
                                </div>
                            </div>
                        </div>
                        <div class="value">{{anchor.score | withHundredMillion}}</div>
                        <div class="help">
                            <img class="help-case"
                                [src]="deployUrl+'assets/img/end-year/renqi/others-main-item-help-bg.png'">
                            <img class="help-avatar" [src]="anchor.userHeadImage | headImg" alt="">
                        </div>
                    </div>
                    <!-- spinner -->
                    <div class="others-main__spinner">
                        <div class="spinner-content" (click)="getMore()">
                            <ng-container *ngIf="pageSize<100&&othersList.length+3===pageSize; else tips">
                                查看更多
                            </ng-container>
                            <ng-template #tips>
                                {{othersList.length+3===100?'本榜单只显示前100名':loading?'.....':''}}
                            </ng-template>
                        </div>
                    </div>
                </div>
                <div class="others-footer"
                    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-footer-bg.png)'">
                </div>
            </div>
        </div>
        <div class="container-footer"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/bg-footer.png)'">
            <p *ngIf="!isAndroid&&!isPC">声明：本活动与Apple Inc.无关</p>
            <p>请用户注意，适度娱乐，理性消费</p>
        </div>
        <!-- 直播间主播 -->
        <div class="others-main__item"
            [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-main-item-bg-unique.png)'">
            <div class="index">{{currentAnchorUserInfo.rank}}</div>
            <div class="detail">
                <div class="detail-avatar" (click)="goToRoom(currentAnchorUserInfo)">
                    <img class="detail-avatar__main" [src]="currentAnchorUserInfo.anchorHeadImage | headImg" alt="">
                    <!-- <ng-container *ngIf="currentAnchorUserInfo.liveStatus">
                        <img *ngIf="isAndroid" class="detail-avatar__live"
                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                        <img *ngIf="!isAndroid" class="detail-avatar__live"
                            [src]="deployUrl+'assets/img/end-year/common/live.png'" alt="直播中">
                    </ng-container> -->
                </div>
                <div class="detail-info">
                    <div class="detail-info--name">{{currentAnchorUserInfo.anchorNickname}}</div>
                    <div class="detail-info--gap">{{currentAnchorUserInfo.rankDesc}}</div>
                </div>
            </div>
            <div class="value">{{currentAnchorUserInfo.score | withHundredMillion}}</div>
            <div class="help">
                <img class="help-case" [src]="deployUrl+'assets/img/end-year/renqi/others-main-item-help-bg.png'">
                <img class="help-avatar" [src]="currentAnchorUserInfo.userHeadImage | headImg" alt="">
            </div>
        </div>
    </div>
</div>